<template>
  <view class="demo-tabs">
    <!-- 默认滚动模式 -->
    <fu-tabs 
      v-model="activeTab1" 
      :list="tabList1"
      @change="onChange"
      @disabled="onDisabled"
    ></fu-tabs>
    
    <!-- 固定模式 -->
    <fu-tabs 
      v-model="activeTab2" 
      :list="tabList2"
      :scroll="false"
      active-color="#ee0a24"
      @change="onChange"
    ></fu-tabs>
    
    <!-- 卡片模式 -->
    <fu-tabs 
      v-model="activeTab3" 
      :list="tabList3"
      type="card"
      :scroll="false"
      :show-bar="false"
      @change="onChange"
    ></fu-tabs>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab1: 0,
      activeTab2: 0,
      activeTab3: 0,
      tabList1: [
        { name: 0, label: '标签一' },
        { name: 1, label: '标签二' },
        { name: 2, label: '标签三', disabled: true },
        { name: 3, label: '标签四' },
        { name: 4, label: '标签五' },
        { name: 5, label: '标签六' }
      ],
      tabList2: [
        { name: 0, label: '标签1' },
        { name: 1, label: '标签2' },
        { name: 2, label: '标签3' }
      ],
      tabList3: [
        { name: 0, label: '全部' },
        { name: 1, label: '待付款' },
        { name: 2, label: '待发货' },
        { name: 3, label: '待收货', disabled: true },
        { name: 4, label: '已完成' }
      ]
    }
  },
  
  methods: {
    onChange(name) {
      console.log('切换到:', name)
    },
    
    onDisabled(item) {
      uni.showToast({
        title: `${item.label}已禁用`,
        icon: 'none'
      })
    }
  }
}
</script>

<style>
.demo-tabs {
  padding: 20rpx;
}

.fu-tabs {
  margin-bottom: 30rpx;
}
</style> 